<template>
  <div class="confirm-box-card">
    <div v-if="title.trim()?.length" class="card-header">{{ title }}</div>
    <div class="card-body" :class="bodyClass">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
export type ConfirmBoxCardProps = {
  title?: string
  bodyClass?: string
}

withDefaults(defineProps<ConfirmBoxCardProps>(), {
  title: '',
  bodyClass: ''
})
</script>

<style lang="less" scoped>
.confirm-box-card {
  @apply text-sm/22px;
  display: flex;
  flex-direction: column;
  font-style: normal;
  & + .confirm-box-card {
    margin-top: 24px;
  }
  .card-header {
    @apply text-sm/22px font-700 mb-2 !text-1;
    color: var(--cdn-cascader-color-text-1);
  }
  .card-body {
    color: var(--cdn-cascader-color-text-2);
    font-weight: 400;
    line-height: 16px;
  }
}
</style>
